<template>

	<div id="foreShow">
		<br>
		<div id="main-first">
			<el-image :src="pic('')" style="width: 20%;" />
			<div style="width:40%">
				<el-input v-model="data.select" size="large" placeholder="请输入内容">
					<template #append>
						<el-button size="large" @click="postSelect"
							style="background-color: red;color: white;border: 0;display: block;font-size: 16px;font-weight:bolder">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
					</template>
				</el-input>
			</div>
			<div style="width: 20%;">
				<el-button type="primary" size="large" style="background-color: red;border: 0;"
					@click="myCart"><el-icon ><ShoppingCart /></el-icon>&nbsp;我的购物车</el-button>
			</div>
		</div>
		<br>
		<div id="main-second-header">
			<el-button class="button-header" @click="goSelect(0)">
				全部商品分类详情
			</el-button>
			<a style="background-color: red;
          color: white;
          text-decoration: none;
          border-radius: 20%;
          height: 20px;
          line-height: 20px;
          text-align: center;
          width: 50px;
          font-size: 0.8rem;
          ">热卖中</a>
		</div>
		<div id="main-second-body">
			<div id="main-second-body-emnu">
				<span v-for="i in data.type" class="typeName">
					<p @click="goSelect(i.id)">
						{{ i.name }}
					</p>
				</span>
			</div>

			<div id="main-second-body-img">
				<el-carousel height="300" :interval="5000" style="width: 100%;">
					<el-carousel-item v-for="item in data.showimgs" :key="item.id">
						<img :src="pic(item.picture)" />
					</el-carousel-item>
				</el-carousel>
			</div>
			<div id="main-second-body-salenum">
				<div class="salenum" v-for="i in data.salenumBooks" :key="i.id">
					<div style="width: 50px;height: auto;">
						<img :src="pic(i.pic)" width="50px" style="border-radius: 50%;" alt="商品图">
					</div>
					<!-- <el-avatar icon="el-icon-user-solid" size="large" shape="circle" :src="pic(i.pic)" fit="fill" /> -->
					<div
						style="width: 70%;height: auto;display: flex;flex-direction: column;justify-content: space-around;">
						<div class="salenum-header">
							<p class="salenum-name" @click="findBook(i.id)">{{ i.name }}</p>
							<p class="salenum-price">￥{{ i.price }}</p>
						</div>
						<div class="salenum-bottom">
							<p class="salemun-master">{{ i.maker }}</p>
							<p class="salemun-author">{{ i.author }}</p>
							<p class="salemun-operate" @click="goShopping(i.id)">买</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<br>
		<div id="main-third-header">
			<el-button class="button-header">
				最新上架书籍
			</el-button>
		</div>
		<div id="main-third-body">
			<div class="main-third-rows" v-for="row in data.newBooks" >
				<div class="main-third-row" v-for="book in row" :key="book.id">
					<div style="width: 80%;">
						<el-image :src="pic(book.pic)" fit="cover" :lazy="true" @click="findBook(book.id)"
							style=" width: 100%;height: 100%;object-fit: cover;border-radius: 20px;"></el-image>
					</div>
					<p class="main-third-row-header">{{ book.name }}</p>
					<div class="main-third-row-price">
						<p> ￥{{ book.price }} </p>
						<el-button type="danger" size="medium" @click="goShopping(book.id)"> <i
								class="el-icon-shopping-cart-2"></i>
							购买</el-button>
					</div>
				</div>
			</div>
		</div>
		<br>
		<hr style="border: 1px solid red;">
		<div id="main-four-bottom">
			<div>
				<img src="../../assets/1.png" alt="">
				<span style="font-size: 18px;font-weight: 700;">正品保障</span>
				<span style="font-size: 14px;">正品行货 放心购买</span>
			</div>
			<div>
				<img src="../../assets/2.png" alt="">
				<span style="font-size: 18px;font-weight: 700;">满38包邮</span>
				<span style="font-size: 14px;">满38包邮 免运费</span>
			</div>
			<div>
				<img src="../../assets/3.png" alt="">
				<span style="font-size: 18px;font-weight: 700;">天天低价</span>
				<span style="font-size: 14px;">天天低价 畅选无忧</span>
			</div>
			<div>
				<img src="../../assets/4.png" alt="">
				<span style="font-size: 18px;font-weight: 700;">准时送达</span>
				<span style="font-size: 14px;">收货时间由你做主</span>
			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from "vue";
	import api from "../../api";
	import pic from "../../api/pic";
	import {
		ElMessage
	} from "element-plus";
	import router from "../../router";
	import store from "../../store";

	const data = reactive({
		select: '',
		salenumBooks: [],
		type: [],
		showimgs: [],
		newBooks: []
	})

	const myCart = () => {
		router.push('/info/shoppingcart')
	}

	const postSelect = () => {
		//初始化数据
		store.state.page.show.curPage = 1;
		store.state.page.show.lines = 6;
		store.state.key = data.select;
		store.state.typeid = 0;
		
		router.push(`/info/books`)
	}

	const goSelect = (id) => {
		store.state.typeid = id;
		store.state.key = '';
		store.state.page.show.curPage = 1
		router.push(`/info/books`)
	}

	const findBook = (bookid) => {
		router.push(`/info/book?id=${bookid}`)
	}


	const goShopping = (id) => {
		api.get(`/api/cart/add/${id}`).then((resp)=>{
			let msg = resp.data.msg;
			ElMessage.success(msg)
		})
	}
	//初始化
	onMounted(() => {
		api.get("/api/public/findHot/1/6").then((resp) => {
			data.showimgs = resp.data.data
		})

		api.get("api/public/getType").then((resp) => {
      // 二级类型
      const type = resp.data.data.types
      // 一级类型
      const category = resp.data.data.category

      console.log("type",type)
      console.log("category",category)

      for (let i = 0; i < category.length; i++) {
        let c = {
          id: category[i].id,
          name: category[i].name
        }
        data.type.push(c)
        for (let j = 0; j < type.length; j++) {
          if (category[i].id == type[j][0]) {
            for (let t = 1; t < type[j].length; t++) {
              let ty = {
                id: type[j][t].id,
                name: category[i].name + ` / ` + type[j][t].name
              }
              data.type.push(ty)
            }
          }
        }
      }

			console.dir(data.type)
		})
		
		api.get('/api/public/book/findTopSale/5').then((resp) => {
			data.salenumBooks = resp.data.data
		})
		api.get('/api/public/book/findPage/1/10/0').then((resp) => {
			// data.newBooks = 
			let books = resp.data.data.books
			let b = [];
			for(let i=0;i < books.length;i++){
				if(i%5 == 0){
					data.newBooks.push(b)
					b = []
				}
				b.push(books[i])
			}
			if(b.length != 0)data.newBooks.push(b)
			console.log("new",data.newBooks)
			
			
		})
	})
</script>

<style lang="less">
	#foreShow {

		// 设置内边距全局布局
		padding-left: 12%;
		padding-right: 12%;

		#main-first {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}

		//展示头部框
		.button-header {
			background-color: red;
			color: white;
			border: 0;
			width: 25%;
			border-radius: 0;
			font-size: 1rem;
		}

		.button-header:hover {
			background-color: rgb(197, 2, 2);
		}

		//轮播展示头部
		#main-second-header {
			border-bottom: 2px solid red;
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
		}

		//轮播展示主体
		#main-second-body {
			height: 300px;
			display: flex;

			/* 隐藏滚动条 */
			#main-second-body-emnu::-webkit-scrollbar {
				display: none;
			}
			// 中部分类侧边栏
			#main-second-body-emnu {
				width: 25%;
				background-color: #F7F8FC;
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: flex-start;
				overflow-y: visible;
				overflow-x: hidden;
				text-overflow: ellipsis;
				/* 为了兼容 IE 和 Edge */
				-ms-overflow-style: none;
				scrollbar-width: none;

				// 首页书籍分类
				span.typeName {
					width: 100%;
					margin-bottom: 10px;

					p {
						width: 80%;
						margin: 0;
						margin-left: 10%;
						margin-right: 10%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				// 中部分类侧边栏
				span.typeName:hover {
					background-color: #ededed;
					color: red;
				}
			}

			// 中部分类轮播图
			#main-second-body-img {
				width: 45%;
				margin: 0% 2.5%;
				border-radius: 10px;

				.el-carousel__item img {
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}

				// 指示器不可换行显示
				.el-carousel__indicators--horizontal {
					display: inline; //设置为行标签
					white-space: nowrap;
				}

				.el-carousel__indicator.is-active .el-carousel__button {
					background-color: #409eff;
				}
			}

			//中部热度栏
			#main-second-body-salenum {
				width: 25%;
				background-color: #F7F8FC;
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				.salenum {

					display: flex;
					flex-direction: row;
					justify-content: space-evenly;

					//热度书籍之图书名及价格
					.salenum-header {
						display: flex;
						width: 90%;

						.salenum-name:hover {
							color: red;
						}

						.salenum-name {
							width: 90%;
							display: -webkit-box;
							/* 将元素设置为弹性伸缩盒子模型 */
							-webkit-box-orient: vertical;
							/* 设置子元素垂直排列 */
							// -webkit-line-clamp: 1;
							line-clamp: 1;
							/* 限制显示的行数为 1 行*/
							overflow: hidden;
							/* 隐藏超出部分的内容 */
							text-overflow: ellipsis;
							/* 超出部分用省略号表示 */
							font-size: 14px;
							font-weight: 700;
							margin: 0;
						}

						.salenum-price {
							font-size: 12px;
							font-weight: 600;
							margin: 0;
						}
					}

					//热度书籍之图书出版作者及操作
					.salenum-bottom {
						width: 90%;
						display: flex;
						justify-content: space-between;

						p {
							font-size: 12px;
							margin: 0;
							white-space: nowrap; //不允许换行
							overflow: hidden; //超出部分隐藏
							text-overflow: ellipsis; //隐藏部分省略代替
						}

						//操作买
						.salemun-operate {
							background-color: red;
							color: white;
							width: 20px;
							height: 20px;
							line-height: 20px;
							text-align: center;
							border-radius: 30%;
						}

						.salemun-operate:hover {
							background-color: rgb(197, 2, 2);
							cursor: pointer;
						}
					}

				}
			}

		}

		//最新上架展示头部
		#main-third-header {
			border-bottom: 2px solid red;
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
		}

		#main-third-body {
			min-height: 200px;
			.main-third-rows {
				display: flex;
				flex-direction: row;
				margin-bottom: 10px;

				.main-third-row {
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}

			.main-third-row-header {
				width: 80%;
				font-size: 12px;
				white-space: nowrap; //不允许换行
				overflow: hidden; //超出部分隐藏
				text-overflow: ellipsis; //隐藏部分省略代替
				text-align: center;
				margin: 0;
			}

			.main-third-row-price {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-evenly;

				p {
					font-size: 12px;
					display: inline;
				}

				button {
					width: 70px;
					height: 25px;
					padding: 10px;
					background-color: red;
					color: white;
					border: 0;
					border-radius: 6px;
				}
			}
		}

		#main-four-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;

			div {
				height: 130px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly
			}
		}

	}
</style>

<!-- 
隐藏滚动条

(id/class)::-webkit-scrollbar {
    display: none;
}
/* 为了兼容 IE 和 Edge */
(id/class){
    -ms-overflow-style: none;
    scrollbar-width: none;
}
            
-->